<template>
    <el-card shadow="never" class="notice">
        <!-- 搜索 -->
        <Search :model="searchForm" @search="getData" @reset="resetSearchForm">
            <SearchItem label="关键词：">
                <el-input v-model="searchForm.title" placeholder="商品标题" clearable></el-input>
            </SearchItem>
        </Search>
        <!-- 新增|刷新  -->
        <ListHeader @create="handleCreate" @refresh="getData"></ListHeader>
        <el-table :data="tableData" stripe style="width: 100%" v-loading="loading" default-expand-all>
            <el-table-column type="expand">
                <template #default="{ row }">
                    <div class="tableExpand">
                        <el-avatar :size="50" :src="row.user.avatar" fit="fill" class="tableExpandAvatar"></el-avatar>
                        <div class="tableExpandText">
                            <h6 class="tableExpandTextH6">
                                {{ row.user.nickname || row.user.username }}
                                <small class="tableExpandTextH6Small">{{ row.review_time }}</small>
                                <el-button size="small" class="tableExpandTextH6Button" @click="openTextarea(row)"
                                    v-if="!row.textareaEdit && !row.extra">回复</el-button>
                            </h6>
                            {{ row.review.data }}
                            <div class="tableExpandTextDiv">
                                <el-avatar v-for="(item, index) in row.review.image" :key="index" :size="50" :src="item"
                                    fit="cover" style="width: 100px; height: 100px;"
                                    class="tableExpandTextDivAvatar"></el-avatar>
                            </div>

                            <div v-if="row.textareaEdit">
                                <el-input v-model="textarea" placeholer="请输入评价内容" type="textarea" :rows="2"></el-input>
                                <div class="tableExpandTextBottom2Div">
                                    <el-button type="primary" size="small" @click="review(row)">回复</el-button>
                                    <el-button size="small" class="tableExpandTextBottom2DivCancel"
                                        @click="row.textareaEdit = false">取消</el-button>
                                </div>
                            </div>
                            <template v-else>
                                <div class="tableExpandTextBottom" v-for="(item, index) in row.extra" :key="index">
                                    <h6 class="tableExpandTextBottomText1">客服
                                        <el-button type="info" size="small" class="tableExpandTextBottomText1Button"
                                            @click="openTextarea(row, item.data)">修改</el-button>
                                    </h6>
                                    <p>{{ item.data }}</p>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="ID" width="70" align="center" prop="id" />
            <el-table-column label="商品" width="200">
                <template #default="{ row }">
                    <div class="manager">
                        <el-image :src="row.goods_item ? row.goods_item.cover : ''" fit="fill" :lazy="true"
                            style="width: 50px; height:50px" class="managerImage"></el-image>
                        <div class="mangerText">
                            <h6>{{ row.goods_item?.title ?? '商品已被删除' }}</h6>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="评价信息" width="200">
                <template #default="{ row }">
                    <div>
                        <p>用户：{{ row.user.nickname || row.user.username }}</p>
                        <p>
                            <el-rate v-model="row.rating">
                            </el-rate>
                        </p>
                    </div>
                    {{ row.role ? row.role.name : '-' }}
                </template>
            </el-table-column>
            <el-table-column label="评价时间" align="center" prop="review_time" />
            <el-table-column label="状态">
                <template #default="{ row }">
                    <el-switch :disabled="row.super === 1" :loading="row.statusLoading"
                        @change="handleStatusChange($event, row)" :modelValue="row.status" :active-value="1"
                        :inactive-value="0"></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="发布时间" width="380" />
        </el-table>
        <div class="noticeBottom">
            <el-pagination background layout="prev,pager, next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="getData" />
        </div>
    </el-card>
</template>
<script setup>
import { ref } from 'vue'
import ListHeader from '@/components/ListHeader.vue'
import { getGoodsCommentList, updateGoodsCommentStatus, reviewGoodsCommentStatus } from '@/api/goods_comment.js'
import { useInitTable } from '@/hooks/useCommon'
import Search from '@/components/Search.vue'
import { elNotification } from '@/hooks/elNotification.js'
import SearchItem from '@/components/SearchItem.vue'

// 搜索、获取、分页、删除、修改状态
const roles = ref([])
const {
    searchForm,
    resetSearchForm,
    tableData,
    loading,
    currentPage,
    total,
    limit,
    getData,
    handleDelete,
    handleStatusChange
} = useInitTable({
    searchForm: {
        title: ""
    },
    getList: getGoodsCommentList,
    onGetListSuccess: (res) => {
        tableData.value = res.list.map(o => {
            o.statusLoading = false
            o.textareaEdit = false
            return o
        })
        roles.value = res.roles
        total.value = res.totalCount
    },
    updateStatus: updateGoodsCommentStatus
})

const textarea = ref("")

const openTextarea = (row, data = "") => {
    textarea.value = ""
    row.textareaEdit = true
}

const review = (row) => {
    if (textarea.value == "") {
        return elNotification("回复内容不能为空", "error")
    }
    reviewGoodsCommentStatus(row.id, textarea.value).then(res => {
        row.textareaEdit = false
        elNotification("回复成功")
        getData()
    })
}
</script>
<style scoped lang="less">
.managerImage {
    border-radius: 50%;
}

.tableExpand {
    display: flex;
    padding-left: 18px;

    .tableExpandAvatar {
        margin-right: 10px;
    }

    .tableExpandText {
        flex: 1;

        .tableExpandTextH6 {
            display: flex;
            align-items: center;

            .tableExpandTextH6Small {
                color: #767676;
                margin-left: 10px;
            }

            .tableExpandTextH6Button {
                margin-left: auto;
            }
        }

        .tableExpandTextDiv {
            padding: 10px 0;

            .tableExpandTextDivAvatar {
                border-radius: 5px;
            }
        }

        .tableExpandTextBottom {
            margin-top: 10px;
            background-color: #eee;
            padding: 10px;
            border-radius: 5px;

            .tableExpandTextBottomText1 {
                display: flex;
                font-weight: bold;

                .tableExpandTextBottomText1Button {
                    margin-left: auto;
                }
            }
        }

        .tableExpandTextBottom2Div {
            padding: 10px 0;

            .tableExpandTextBottom2DivCancel {
                margin-left: 10px;
            }
        }
    }
}

.notice {
    border: 0;



    .tableAction {
        font-size: 14px;
    }

    .noticeBodySearch {
        margin-bottom: 10px;

        .noticeBodySearchBtn {
            display: flex;
            justify-content: end;
            align-items: center;
        }
    }

    .manager {
        display: flex;
        align-items: center;

        .mangerText {
            margin-left: 3px;
        }
    }

    .noticeBottom {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
    }
}
</style>